<!--
 * @Description: 订单页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: Jeremy
 * @LastEditTime: 2022-05-17 16:15:47
-->
<template>
  <div>
    <!-- 组件 -->
    <van-nav-bar title="订单" />
    <!-- 头部 -->
    <div class="header">
      <!--  v-model双向事件绑定 -->
      <!-- active默认选中状态 -->
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="全部订单"></van-tab>
        <van-tab title="待派单"></van-tab>
        <van-tab title="待接单"></van-tab>
        <van-tab title="待确认"></van-tab>
        <van-tab title="已完成"></van-tab>
      </van-tabs>
    </div>
    <!-- 订单内容 -->
    <div class="content">
      <van-row type="flex" justify="center">
        <van-col
          @click="$router.push({ path: 'orderDetail', query: { id: item.id } })"
          v-for="item in orderListData"
          :key="item.id"
          span="18"
        >
          <van-tag plain type="primary">{{ item.status }}</van-tag>
          <van-card
            :price="item.total"
            :desc="
              item.address.city +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
          />
          <div class="content-time">{{ item.orderTime | dateFormat }}</div>
        </van-col>
        <van-empty
          v-if="orderListData.length == 0"
          description="暂时没有数据"
        />
      </van-row>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import { pageQueryOrder } from '@/api/index.js';
export default {
  data() {
    return {
      active: 0,
      orderData: [],
      orderListData: [],
    };
  },
  computed: {},
  methods: {
    //获取订单数据
    async loadOrder() {
      let res = await pageQueryOrder({ page: 1, pageSize: 100 });
      this.orderData = res.data.data.list;
      console.log(res);
      this.orderListData = res.data.data.list;
    },
    //导航发生改变,过滤对于的产品
    onClick(name, title) {
      if (title == '全部订单') {
        this.orderListData = this.orderData;
      } else {
        this.orderListData = this.orderData.filter((item) => {
          return item.status === title;
        });
      }
    },
  },
  created() {
    this.loadOrder();
  },
  mounted() {},
};
</script>
<style>
.van-col--18 {
  width: 88%;
  margin-top: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 10px;
}

/* 背景颜色 */
.van-card {
  background: #fff;
}

.van-card__price {
  display: block;
  margin-left: 170px;
}

.van-card__title {
  margin-bottom: 10px;
  font-size: 18px;
}
.van-tag--primary.van-tag--plain {
  position: absolute;
  z-index: 10;
  left: 300px;
  margin-top: 10px;
  color: red;
  z-index: 1;
}
/* 时间样式 */
.content-time {
  position: absolute;
  left: 140px;
  margin-top: -30px;
  font-size: 12px;
}

/* 圆角 */

.van-card__thumb img {
  border-radius: 50%;
}
</style>
